<script>
export default {
  name: "content-layout",
  props: {
    iconType: {
      type: String,
      default: "none"
    },
    iconSize: {
      type: Number,
      default: 18
    },
    label: {
      type: String,
      default: ""
    },
    separator: {
      type: String,
      default: "："
    },
    content: {
      type: String,
      default: ""
    }
  }
}
</script>

<template>
  <view class="container" ref="container">
    <view class="left">
      <view class="icon">
        <uni-icons :type="iconType" :size="iconSize" ></uni-icons>
      </view>
      <view class="label">
        <text>{{label + separator}}</text>
      </view>
    </view>
    <view class="right" >
      <text name="content">{{content}}</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  padding: 5rpx 0;

  .left {
    max-width: 250rpx;
    display: flex;
    .icon {
      max-width: 40%;
      margin: 0 5rpx;
    }
    .label {
      margin: 0 5rpx;
      max-width: 60%;
      white-space: nowrap;
    }
  }

  .right{
    max-width: 500rpx;
  }

}
</style>